<template>
  <div class="ReturnRefund">
    <div class="demo-nav">
      <div class="demo-nav__title">退货退款</div>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
    </div>
    <div class="ReturnRefund-demo">
      <van-row>
        <van-col span="7"><van-image width="5rem" height="5rem" fit="cover" :src="list.picUrl"/></van-col>
        <van-col span="15" style="text-align: left">
          <p>{{list.productName}}</p>
          <P style="color: #cccccc;font-size: 0.6rem;padding-top: 0.5rem">{{list.labelName}},{{list.labelUnit}}</P>
        </van-col>
      </van-row>
      <!--<van-cell title="退货原因" is-link value="请选择" align="left"/>-->
      <div align="left">
        <p style="padding: 0.3rem 0 0.3rem 0.95rem;font-size: 0.8rem;">退款金额：<span style="color: red">￥{{list.paymentMoney}}</span></p>
        <p style="padding:  0.3rem 0 0.3rem 0.95rem;font-size: 0.6rem;color: #cccccc">不可修改</p>
      </div>
      <van-cell-group>
        <van-field v-model="orderRetreat.orderRetreatReason" label="退货原因" placeholder="必填"/>
      </van-cell-group>
      <van-cell title="上传凭证" align="left"/>
      <div align="left" style="padding: 0.8rem">
        <van-uploader
          v-model="fileList"
          :max-count="4"
          :after-read="onRead"
          accept="image/*"
          :multiple="true"
        ></van-uploader>
      </div>
    </div>
    <van-button round type="danger" @click="refund()">提交退货</van-button>
  </div>
</template>

<script>
  import { addOrderRetreat,uploadImages } from "@/api/commodity/order_retreat";
  import { Notify } from 'vant';
  import { Toast } from 'vant';
  export default {
    name: "ReturnRefund",
    components: {
      [Notify.Component.name]: Notify.Component,
    },
    data(){
      return{
        //订单列表申请退货的对象
        list:{},
        //退货原因的理由
        orderRetreat:{
          orderId:'',
          supplierId:'',
          orderRetreatReason:'',
          orderRetreatPicture:'',
          fileList:[],
          urlList:[],
        },
        //图片文件
        fileList:[],
        urlList:[],

      }
    },
    created() {
      this.list = JSON.parse(sessionStorage.getItem('list'));
      console.log(this.list);
    },
    methods:{
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      //上传多图片
      onRead (e) {
        //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
        let fd = new FormData()
        if (e instanceof Array && e.length) { // 判断是否是多图上传 多图则循环添加进去
          e.forEach(item => {
            fd.append("files", item.file)//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
          })
        } else {
          fd.append("files", e.file)
        }
        uploadImages(fd).then((res)=>{
          if(res.data.code==200){
            this.urlList.push(res.data);
          }else {

          }
          console.log(res);
        })
      },
      //提交退款信息
      refund(){
        this.orderRetreat.orderId = this.list.orderId;
        this.orderRetreat.supplierId = this.list.supplierId;
        if(this.orderRetreat.orderRetreatReason==''){
          Notify({ type: 'danger', message: '请填写退货原因' });
        }else {
          this.fileList.forEach(it=>{
            this.orderRetreat.fileList.push(it.file.name);
          })
          this.orderRetreat.urlList = this.urlList;
          addOrderRetreat(this.orderRetreat).then((res)=>{
            if(res.data.code==200){
              this.$router.push({ path:'/AllOrder'});
              Toast.success("申请成功");
            }else {
              this.$router.push({ path:'/AllOrder'});
              Toast.fail("申请失败");
            }
            console.log(res,"123");
          })
        }
      },

    }
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .ReturnRefund-demo{
    padding: 0.5rem;
  }

</style>
